import React,{useState} from "react";
import './index.scss';
import login from '../../asstes/login.png'
import type { FormProps } from 'antd';
import { Button, Form, Input } from 'antd';
import { useNavigate } from "react-router";
import instance from '../../utlis/index'
interface FromDataRawStore{
    password:string,
    username:string,
}
const onFinish: FormProps<FromDataRawStore>['onFinish'] = (values) => {
  console.log('Success:', values);
};

const onFinishFailed: FormProps<FromDataRawStore>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

const Index:React.FC=()=>{
    const navigate = useNavigate()
    const [password,setPassword]= useState<string>('')
    const [username,setUsername]= useState<string>('')
    
    
    const handerSubmit =async()=>{
       try {
         const config = {
            url:'/api/login',
            method:'post',
            data:{
              username:username,
              password:password,
              
            }
        }
        const res = await instance(config)
        // console.log(res)
        const {data} = res
        const userInfo = localStorage.setItem('userInfo',JSON.stringify(data.user))
        const token = localStorage.setItem('token',JSON.stringify(data.token))
         if(data.status===200){
          navigate('/')
         }
        
       } catch (error) {
         console.log(error)
       }
    }
    const handerregister=()=>{
          navigate('/register')
    }
    return(
        <div className="container">
            <div className="left">
                <img src={login} alt="" />
            </div>
            <div className="right">
               <div>
                   <div>
                     <h1>系统登录</h1>
                     <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FromDataRawStore>
                            label="账户"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                            <Input value={username} onChange={(e)=>setUsername(e.target.value)}/>
                            </Form.Item>

                            <Form.Item<FromDataRawStore>
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                            >
                            <Input.Password  value={password} onChange={(e)=> setPassword(e.target.value)}/>
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" onClick={()=>handerSubmit()}>
                                登录
                            </Button>
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button onClick={()=>handerregister()}>
                               Or 注册用户
                            </Button>
                            </Form.Item>
                        </Form>
                                            
                   </div>
               </div>

            </div>
        </div>
    )
}
export default Index